<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        input {
            display: block;
            margin: 10px auto;
        }
        
        #box {
            width: 80%;
            height: 500px;
            background-color: pink;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        
        #ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: skyblue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <input type="button" value="发射" id="btn">
    <div id="box">

    </div>
    <script>
        var nowTime = 0;
        var time = setInterval(move, 100);
        var tt = setInterval(function() {
            newE()
        }, 100)
        var v0 = 50;
        var g = 5;
        var balls = [];
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        btn.addEventListener('click', newE)

        function newE() {
            var ball = document.createElement('div')
            ball.id = 'ball';
            ball.classList = nowTime;
            box.appendChild(ball);
            balls.push(ball);
        }

        function move() {
            nowTime = nowTime + 0.5;
            if (balls.length > 0) {

                for (i = 0; i < balls.length; i++) {
                    // console.log(balls[i].className);
                    let x = parseInt(window.getComputedStyle(balls[i]).left) + v0 * 0.5;
                    balls[i].style.left = x + 'px';
                    // console.log(nowTime - balls[i].className);
                    let y = 0.5 * g * ((nowTime - balls[i].className) * (nowTime - balls[i].className));
                    // console.log(0.5 * g * (nowTime - balls[i].className));
                    balls[i].style.top = y + 'px';
                }
            }
        }
    </script>
</body>

</html>